<template>
  <div>
    <div class='bigBox'>
      <navBar :title="title" class="nav"></navBar>
      <ul class="personList">
        <li @click="information">
          个人信息
          <span>头像、昵称</span>
        </li>
        <li>
          收获地址
          <span @click="address">我的收获地址</span>
        </li>
        <li @click="About">
          关于我们
        </li>
      </ul>
      <span class="bc"></span>
    </div>
     <van-button type="primary" 
      class="back"
      @click="outEvt"
      block>
        退出
    </van-button>
    <van-popup v-model="show" 
      position="right" 
      :style="{ width: '100%',height:'90%' }" 
      close-icon="close"  
      close-icon-position="top-left">
        <div class="information">
          <h1>个人信息</h1>
          <ul class="personData">
            <li>
              <span class="head"></span>
            </li>
            <li>
              用户名
              <span class="user">{{userName}}</span>
            </li>
            <li>
              手机号码
              <span class="phone"></span>
            </li>
          </ul>
        </div>
      </van-popup>
      <van-popup v-model="about" 
        position="right" 
        :style="{ width: '100%',height:'90%' }" >
        <div class="aboutUs">
          <h1>关于我们</h1>
          <p>当您按照注册页面提示填写信息、阅读并同意本协议且完
            成全部注册程序后，或您按照激活页面提示填写信息、阅
            读并同意本协议且完成全部激活程序后，或您以其他皮皮
            陪玩允许的方式实际使用本服务时，即表示您已充分阅
            读、理解并接受本协议的全部内容，本协议即产生法律约
            束力。您承诺接受并遵守本协议的约定，届时您不应以未
            阅读本协议的内容或者未获得xxx对您问询的解答等理
            由，主张本协议无效或要求撤销本协议。</p>
        </div>
      </van-popup>
  </div>
</template> 

<script>
  import navBar from '@/components/navBar'
  export default {
    name: '',
    props: {},
    components: {
      navBar,
    },
    data() {
      return {
        title:'个人设置',
        show: false,
        about:false,
        userName:'',
      };
    },
    methods: {
      information(){
        this.show = true;
      },
      About(){
        this.about = true;
      },
      address(){
        this.$router.push( {path: '/my/address'})
      },
      outEvt(){
        this.$router.push({path: '/login'})
        sessionStorage.removeItem('token')
      }
    },
    created(){
      this.userName = 'cherry'
    },
    mounted() {},

    computed: {},

    watch: {},

  };
</script>

<style lang='scss' scoped>
  .bigBox{
    width: 100%;
    height: 47.1rem;
    position: fixed;
  }
  .personList{
    width: 100%;
    height: 12rem;
    margin-top: 2.89rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    li{
      width: 100%;
      height: 4rem;
      font-size: .9rem;
      border-bottom: 1px solid #e5e5e5;
      padding-left: .7rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      background: url('../../../assets/bg.jpg') no-repeat 23.13rem center;
    }
    span{
      display: block;
      font-size: .16rem;
      color: #666;
      line-height: 1rem;
    }
  }
  .information,.aboutUs{
    width: 100%;
    height: 100%;
    position: relative;
    h1{
      text-align: center;
    }
    .personData{
      width: 100%;
      height: 12rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      li{
        height: 4rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: .7rem;
        padding-right: .7rem;
      }
    }
    .head{
      display: block;
      width: 3.24rem;
      height: 3.24rem;
      border: 1px solid #666;
      border-radius: 50%;
      position: absolute;
      right: 1.33rem;
      top: 3.07rem;
      background: url("../../../assets/logo.jpg") no-repeat center center;
      background-size: 100% 100% ;
    }
    p{
      text-indent: 2em;
      font-size: .87rem;
      line-height: 2rem;
      margin-top: 1.13rem;
    }
  }
  .bc{
    display: block;
    width: 100%;
    height: 35.1rem;
    background-color: #f6f6f6;
  }
  .back{
    width: 100%;
    height: 3.67rem;
    line-height: 3.67rem;
    background-color: #fff;
    border: none;
    color: black;
    position: fixed;
    bottom: 0;
    left: 0;
  }
</style>